<template>
    <div class="content">
        <!-- 控件 -->
        <template>
            <div class="control" style="margin-top: 20px; width: 70%;margin: 30px auto;display: flex ; justify-content: flex-end;">
                <!-- <el-button type="primary" size="mini" @click="handleOpen">新 增</el-button>
                <el-button type="primary" size="mini" @click="handleSubmitForm">保 存</el-button> -->
                <el-button type="primary" size="mini" @click="handleCancel" plain>关 闭</el-button>
            </div>
        </template>
        <!-- 内容 -->
        <div class="content_form">
            <el-form ref="form" 
                :model="form" :rules="rules" label-width="7.5rem">
                <div>
                    <h1 class="title" style="color: #606266;font-weight: 600;">{{ questionnaireName }}题</h1>
                    <h1 class="title" style="font-size: .875rem;color: #909399;">本问卷共100分</h1>
                    <ul id="topic">
                        <li class="topic_li" v-for="(item, index ) in listOfTopics">
                            <div class="topic_li_p">
                                <p>
                                    {{ item.topicName }}( )
                                    <span class="topic_li_p_span">本题{{ item.topicScore }}分</span>
                                </p>
                              
                            </div>
                            <ol class="topic_li_ol">
                                <li class="topic_li_ol_li" v-for="a in item.AnswerList">
                                    <span class="topic_li_ol_li_span1">{{ a.option }}</span>
                                    <span class="topic_li_ol_li_span2">本答案{{ a.score }}分</span>
                                </li>
                            </ol>

                        </li>
                    </ul>

                </div>



            </el-form>
        </div>
       

    </div>
</template>
<script>
import { listNaire, getNaire, delNaire, addNaire, updateNaire } from "@/api/InfoQuestionNaire/naire";


export default {
    components: {


    },
    beforeRouteEnter(to, from, next) {
        if (to.query.ids) {
            to.meta.title = "题查看"
        } else {
            to.meta.title = "题查看"
        }
        next()
    },
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入分值'));
            } else {
                if (value > this.residue) {
                    callback(new Error('分值不能超过总分值'));

                }
                callback();
            }
        };
        return {
            // 答案总数
            totalnum: 2,
            // 题目列表
            listOfTopics: [],
            // 分值剩余
            residue: 100,
            // 项目id
            projectId: null,
            // 合并单位
            mergeArr: ['targetOne', 'targetTwo'],
            // 表单数据
            form: {



            },
            // 指标
            formIndex: {
                AnswerList: [
                    {
                        option: null,
                        score: null,
                        optionName: "选项",
                        scoreName: "分值",


                    }
                ]
            },
            // 是否显示弹出层
            open: false,
            // 挑选指标库弹
            open2: false,
            title: "",
            deptOptions: [],

            // 校验
            rules: {

            },
            indexTip: null,
            // 指标校验
            rulesFormIndex: {
                topicName: [
                    { required: true, message: '题目不能为空', trigger: 'change' }
                ],
                topicScore: [
                    { required: true, message: '分值不能为空', trigger: 'change' },
                    { validator: validatePass, trigger: 'blur' }
                ]
            },
            questionnaireName: null

        }
    },
    created() {
        this.projectId = this.$route.query.ids
        /**点击修改时,查询详情 */
        if (this.$route.query.ids) {
            getNaire(this.$route.query.ids).then(res => {
                console.log(res.data, "111")
                this.questionnaireName = res.data.questionTitle
                this.listOfTopics = JSON.parse(res.data.questionContent)
            })

        } else {
            this.questionnaireName = this.$route.query.name

        }
    },
    mounted() {



    },
    methods: {
       
       /** 关闭 */
       handleCancel() {
            this.$router.back()
        },
        
        

      
    },
}
</script>
<style lang="scss" scoped>
 ::v-deep #topic::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    display: none;

}

.content_form {
    padding-left: 252px;
    padding-right: 252px;

    .el-form {
        border: 1px solid rgba($color: #006FBF, $alpha: .15);
        border-radius: 3px;
        padding: 10px 100px;
        height: 75vh;

    }
}

#topic {
    overflow-y: auto;
    height: 65vh;


    .topic_li {
        list-style: decimal;
        padding: 1.875rem 0;

        .topic_li_p {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #606266;
            font-weight: 500;

            .topic_li_p_span {
                font-size: .75rem;
                color: #909399;
                margin-left: .625rem;
            }

        }

        .topic_li_ol {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;

            .topic_li_ol_li {
                list-style: upper-alpha;
                min-width: 12.5rem;
                // width: 100%;
                padding-right: 12.5rem;
                margin: .625rem 0;
              
               

                .topic_li_ol_li_span1 {
                    color: #606266;

                }

                font-size: .875rem;
                color: #333;

                .topic_li_ol_li_span2 {
                    font-size: .75rem;
                    color: #909399;
                    margin-left: .625rem;
                }
            }

        }
    }
}

.plus {
    display: flex;
    justify-content: center;
}</style>